<template>
  <div class="table-form">
    <div class="crud-header" :class="showTableForm ? 'show' : ''">
      <div class="base-form">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="数据表名称">
              <el-input v-model="table.name" placeholder="输入数据表名称">
                <template #prepend>{{ addon.name }}_</template>
              </el-input>
            </el-form-item>
            <el-form-item label="数据表备注">
              <el-input v-model="table.comment" placeholder="输入数据表备注" />
            </el-form-item>
            <el-button type="warning" plain @click="showTableForm = !showTableForm">
              <span>
                {{ !showTableForm ? '高级配置' : '收起配置' }} <i
                  :class="!showTableForm ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" /></span>
            </el-button>
          </el-form>
        </div>
        <div>
          <slot />
        </div>
      </div>
      <div class="more-form">
        <el-collapse-transition>
          <div v-show="showTableForm" class="more-form-content">
            {{ table.tabFields }}
            <div>
              <el-form label-width="120px" label-position="left">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <!--                    <p style="margin-bottom: 20px">表配置</p>-->
                    <el-form-item label="快捷搜索字段">
                      <el-select v-model="table.quickSearchField" placeholder="请选择" multiple>
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="快捷搜索占位符">
                      <el-input v-model="table.quickSearchPlaceholder" placeholder="请输入快捷搜索占位符，不填为默认" />
                    </el-form-item>
                    <el-form-item label="默认排序字段">
                      <el-select v-model="table.defaultSortField" placeholder="请选择">
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="默认排序类型">
                      <el-radio-group v-model="table.defaultSortType">
                        <el-radio value="desc">倒序(desc)</el-radio>
                        <el-radio value="asc">升序(asc)</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="表单字段">
                      <el-select v-model="table.formFields" placeholder="请选择" multiple style="width: 100%">
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">设置表单显示的字段和字段顺序，如果为空，则按照默认顺序</span>
                    </el-form-item>
                    <el-form-item label="表单选项卡">
                      <form-tab-form v-model="table.tabFields" :field-items-option="fieldItemsOption" />
                      <span class="dk-help">将表单整理为标签化，配置当前项后，表单字段将失效</span>
                    </el-form-item>
                    <el-form-item label="表格字段">
                      <el-select v-model="table.columnFields" placeholder="请选择" multiple style="width: 100%">
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">设置表格显示的字段和字段顺序，如果为空，则按照默认顺序</span>
                    </el-form-item>
                    <el-form-item label="远程搜索字段">
                      <el-select v-model="table.remoteSelectField" placeholder="请选择" style="width: 100%" clearable>
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">设置当该表被其他表远程搜索后，下拉框显示的字段名称，不选择默认为name</span>
                    </el-form-item>
                    <el-form-item label="回收站名称字段">
                      <el-select v-model="table.recycleField" placeholder="请选择" style="width: 100%" clearable>
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">设置当启用了回收站后，回收站中列标题名称，不选择默认为name</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="隐藏字段">
                      <el-select v-model="table.columnHideFields" placeholder="请选择" multiple style="width: 100%">
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">设置表格要默认隐藏的字段，可在右上角工具栏勾选出来</span>
                    </el-form-item>
                    <el-form-item label="过滤字段">
                      <el-select v-model="table.columnFilterFields" placeholder="请选择" multiple style="width: 100%">
                        <el-option v-for="item in fieldItemsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">设置要过滤掉完全不显示到表格的字段</span>
                    </el-form-item>
                    <!--                    <p>文件配置</p>-->
                    <el-form-item label="菜单名称">
                      <el-input v-model="table.menuTitle" placeholder="请输入菜单名称" />
                      <span class="dk-help">设置菜单名称，不填写默认为数据表备注</span>
                    </el-form-item>
                    <el-form-item label="多级菜单">
                      <el-switch v-model="table.menuChildren" />
                      <span class="dk-help">开启后，将生成可以展开的多级菜单并生成示例文件</span>
                    </el-form-item>
                    <el-form-item v-if="table.menuChildren" label="菜单默认展开">
                      <el-switch v-model="table.menuOpen" :active-value="true" :inactive-value="false" />
                      <span class="dk-help">开启后，多级菜单将默认为展开状态</span>
                    </el-form-item>
                    <el-form-item label="路由地址">
                      <el-input v-model="table.menuPath" placeholder="请输入管理后台路由地址" />
                      <span class="dk-help">
                        <span>不需要填写/，仅填写地址名即可，默认为表名，当前地址：</span>
                        <span style="color: #3a8ee6; font-weight: bold">你的域名/{{ table.menuPath || table.name }}{{
                          table.menuChildren ? '/index' : '' }}</span>
                      </span>
                    </el-form-item>
                    <el-form-item label="菜单排序">
                      <el-input v-model="table.menuWeight" placeholder="请输入菜单排序值越低越靠前" type="number" />
                    </el-form-item>
                    <el-form-item label="缓存菜单标签">
                      <el-switch v-model="table.menuAddtab" :active-value="true" :inactive-value="false" />
                      <span class="dk-help">开启后，后台顶部将生成标签并缓存页面</span>
                    </el-form-item>
                    <el-form-item label="菜单图标">
                      <el-input v-model="table.menuIcon" placeholder="填写菜单图标，支持ElementPlus、vant、iconify" />
                      <span class="dk-help">
                        <span>点击跳转图片选择工具地址</span>
                        <a style="color: #3a8ee6" href="https://doc.dkyx.cc/vue3/components/icon-input/"
                          target="_blank">
                          图标选择器 </a>、
                        <a style="color: #3a8ee6" target="_blank" href="https://icon-sets.iconify.design/">Iconify</a>
                      </span>
                    </el-form-item>

                    <el-form-item label="页面SDK示例">
                      <el-switch v-model="table.pageSdkDemo" :active-value="true" :inactive-value="false" />
                      <span class="dk-help">开启后，page.vue文件会默认生成table相关的demo</span>
                    </el-form-item>

                    <el-form-item label="表格插槽选择">
                      <el-select v-model="table.tableSlots" placeholder="请选择" multiple style="width: 100%">
                        <el-option v-for="item in tableSlotsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">选择后，将在生成的page.vue文件中显示对应的空插槽</span>
                    </el-form-item>

                    <el-form-item label="操作按钮配置">
                      <el-select v-model="table.buttons" placeholder="请选择" multiple style="width: 100%">
                        <el-option v-for="item in buttonsOption" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                      <span class="dk-help">选择要显示的按钮，选择后，将按照对应的顺序显示按钮。不选择生成默认内容</span>
                    </el-form-item>
                    <el-form-item label="自定义按钮示例">
                      <el-switch v-model="table.buttonDemo" :active-value="true" :inactive-value="false" />
                      <span class="dk-help">开启后，将在原有基础上添加一个自定义按钮的示例</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-collapse-transition>
        <div v-if="showTableForm" class="more-form-button" style="" @click="showTableForm = !showTableForm">
          <span><i class="el-icon-arrow-up" /></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, onMounted } from 'vue'
import FormTabForm from '@/views/crud/components/formTabForm.vue'

const props = defineProps({
  modelValue: { type: Object, default: () => ({ name: '', comment: '' }) },
  fieldItems: { type: Array, default: () => [] },
  addon: { type: Object, default: () => ({}) }
})

const emit = defineEmits(['update:modelValue'])

const table = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v)
})

const showTableForm = ref(false)
const form = ref({})

// 默认表单配置
const defaultTable = {
  name: '',
  comment: '',
  quickSearchField: [],
  quickSearchPlaceholder: '',
  defaultSortField: '',
  defaultSortType: 'desc',
  formFields: [],
  tabFields: [],
  columnFields: [],
  remoteSelectField: '',
  recycleField: '',
  columnHideFields: [],
  columnFilterFields: [],
  menuTitle: '',
  menuChildren: false,
  menuOpen: false,
  menuPath: '',
  menuWeight: 0,
  menuAddtab: true,
  menuIcon: '',
  pageSdkDemo: false,
  tableSlots: [],
  buttons: ['sort', 'edit', 'del'],
  buttonDemo: false
}

onMounted(() => {
  let needEmit = false
  const filled = { ...props.modelValue }
  Object.keys(defaultTable).forEach((key) => {
    if (filled[key] === undefined) {
      filled[key] = defaultTable[key]
      needEmit = true
    }
  })
  if (needEmit) emit('update:modelValue', filled)
})

const tableSlotsOption = [
  { label: '刷新按钮前', value: 'refreshPrepend' },
  { label: '刷新按钮后', value: 'refreshAppend' },
  { label: '新增按钮后', value: 'AddButtonAppend' },
  { label: '导出按钮后', value: 'ExportButtonAppend' },
  { label: '编辑按钮后', value: 'EditButtonAppend' },
  { label: '删除按钮后', value: 'DeleteButtonAppend' },
  { label: '回收站按钮后', value: 'RecycleButtonAppend' },
  { label: '列表前', value: 'columnPrepend' },
  { label: '列表后', value: 'columnAppend' }
]

const buttonsOption = [
  { label: '排序', value: 'sort' },
  { label: '编辑', value: 'edit' },
  { label: '删除', value: 'del' }
]

const fieldItemsOption = computed(() =>
  props.fieldItems.map((item) => ({
    label: item.comment + '(' + item.name + ')',
    value: item.name
  }))
)
</script>

<style scoped lang="scss">
.table-form {
  position: relative;
  height: 90px;
  width: 100%;
}

.crud-header {
  position: absolute;
  width: 100%;
  z-index: 999;
  //position: relative;
  border-radius: 5px;
  background: #fff;
  padding: 20px;
  margin-top: 10px;
  //box-shadow: 0 8px 16px rgba(0, 0, 0, .2), 0 0 12px rgba(0, 0, 0, .08); /* 鼠标悬停时的阴影 */

  &.show,
  &:hover {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.12),
      0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
    /* 添加过渡效果 */
  }

  .base-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &::v-deep {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .more-form {
    z-index: 999;
    background: #fff;
    width: 100%;
    left: 0;
    border-radius: 10px;
  }

  .more-form-content {
    margin-top: 15px;
  }

  .more-form-button {
    text-align: center;
    width: calc(100% - 40px);
    position: absolute;
    cursor: pointer;
    margin: 0 auto;
    font-size: 14px;
    bottom: 5px;
    user-select: none;
    color: #999;

    //span{
    //  background: #fff;
    //  padding: 10px;
    //}
    &:hover {
      color: #3a8ee6;
    }
  }
}
</style>
